<div id="outter" style="width:300px; height:300px; background-color:lightblue">
	<div id="inner" style="margin:100px; width:100px; height:100px; background-color:lightgreen">
		Text
	</div>
</div>
<div id="console"></div>

<script>
var o = document.getElementById("outter");
var i = document.getElementById("inner");
var c = document.getElementById("console");
var currentElement;

o.onmouseover = o_in;
o.onmousemove = o_move;
o.onmouseout = o_out;

i.onmouseover = i_in;
i.onmousemove = i_move;
i.onmouseout = i_out;

function o_in()
{	
	if (currentElement != i)
	{
		pe("-> outter --", "blue");
		currentElement = o;
	}
}

function o_move()
{
	c.innerHTML += "<span style='background-color:blue;color:white'>.</span>";
}

function o_out()
{
	if (currentElement == o)
	{
		pe("-- outter ->", "blue");
		currentElement = null;
	}
}

function i_in()
{
	if (currentElement != i)
	{
		pe("-> inner --", "green");
		currentElement = i;
	}
}

function i_move()
{
	c.innerHTML += "<span style='background-color:green;color:white'>.</span>";
}

function i_out()
{
	if (currentElement == i)
	{
		pe("-- inner ->", "green");
		currentElement = null;
	}
}

function pe(txt, color)
{
	c.innerHTML += "<li style='color:" + color + "'>" + txt + "</li>";
}

</script>
	